<template>
  <div class="alarm-condit-component app-el-form-item" @click="handleOpen">
    <div class="alarm-type-item">
      <div class="alarm-type-title">
        默认预警条件
      </div>
      <div class="type-item">
        <span class="area-label" />
        <span>{{ value.conditionDesc }}</span>
      </div>
    </div>
    <div class="alarm-type-item">
      <div class="alarm-type-title">
        下级指标
      </div>
      <div>
        <template v-for="(childrenAlarmItem, index) in value.warningLevelChildParamList">
          <div :key="index">
            <!-- <span class="area-label">{{childrenAlarmItem.deptId}}</span> -->
            <span>{{ childrenAlarmItem.conditionDesc }}</span>
          </div>
        </template>
      </div>
    </div>
    <AlarmConditSelect ref="AlarmConditSelectRef" @submit="handleAlarmSubmit" />
  </div>
</template>

<script>
import AlarmConditSelect from './selectView'

export default {
  name: 'AlarmCondit',
  components: { AlarmConditSelect },
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleOpen() {
      this.$refs.AlarmConditSelectRef.open(this.$props.value)
    },
    handleAlarmSubmit(e) {
      console.log(e)
      this.$emit('change', e)
    }

  }
}
</script>

<style lang="scss" scoped>
  .alarm-type-item {
    // display: flex;

    .area-label {
      display: inline-block;
      min-width: 60px;
      padding-left: 12px;
    }
  }
</style>
